import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect
} from 'react-router-dom'

const styles = {}

styles.root = {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
}

styles.content = {
    ...styles.root,
    top: '44px',
    textAlign: 'center'
}

styles.hsl = {
    ...styles.root,
    color: '#fff',
    paddingTop: '20px',
    fontSize: '30px'
}

styles.nav = {
    padding: 0,
    margin: 0,
    position: 'absolute',
    top: 0,
    height: '40px',
    width: '100%',
    display: 'flex'
}

styles.navItem = {
    textAlign: 'center',
    flex: 1,
    listStyleType: 'none',
    padding: '10px'
}

const NavLink = (props)=> {
    return (
        <li style={styles.navItem}>
            <Link {...props}></Link>
        </li>
    );
}

const HSL = ({match:{params}}) => {
    return <div style={{
        ...styles.hsl,
        background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`
    }}>{`hsl ${params.h} ${params.s} ${params.l}`}</div>
}

const DefaultRoute = ()=> {
    return <Route exact path="/" render={
    ()=>{
        return <Redirect to="/10/90/50"></Redirect>
    }}></Route>
}

const SinglePage = ()=> {
    return <Router>
        <div>
            <ul style={styles.nav}>
                <NavLink to="/10/90/50">HSL1</NavLink>
                <NavLink to="/120/100/40">HSL2</NavLink>
                <NavLink to="/200/100/40">HSL3</NavLink>
            </ul>
            <div style={styles.content}>
                <Route path="/:h/:s/:l" component={HSL}></Route>
            </div>
            <DefaultRoute/>
        </div>
    </Router>
}

export default SinglePage

